<template>
	<b-layout-shop :type="2" :total="total" @action="goPay">
		<navbar title=" بۇلۇت ئامبار "></navbar>
		<view class="pd-10">
			<view class="bg-white br-rd-10 mg-top-10 mg-bottom-10">
				<b-address-dialog @action="getAddressAction" />
			</view>
			<block v-for="(item,index) in datalist">
				<view class="bg-white br-rd-10">
					<u-cell :border="false">
						<u-avatar shape="square" slot="icon" :src="item.image"></u-avatar>
						<view class="pd-left-5 pd-right-5 title  font-size-14" slot="title">{{item.name}}</view>
						<view class="pd-left-5 pd-right-5 remark font-size-12" slot="label">
							<text> مەسۇلات سانى </text>: <text>{{item.quantity}}</text>
						</view>
						<view class="pd-left-5 pd-right-5  font-size-14  valuebox" slot="value">
							<u-number-box :name="item" @change="onChangeBox" :min="0" :max="item.quantity"
								v-model="item.value">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 20px;text-align: center;"
									class="input">{{selected[item.id]?selected[item.id].quantity:0}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>


						</view>
					</u-cell>
				</view>
			</block>
		</view>
	</b-layout-shop>
</template>

<script>
	import {
		findByMyCloudList
	} from "@/api/goods.js"
	import {
		createCloudOrder
	} from "@/api/order.js"
	export default {
		data() {
			return {
				datalist: [],
				value: 0,
				total: 0,
				selected: {},
				addressId: 0,
				orderlist: []
			}
		},
		onLoad: function() {
			this.getData()
		},
		methods: {
			getData: function() {
				var the = this;
				findByMyCloudList().then(res => {
					console.log(res);
					the.datalist = res;
				})
			},
			getAddressAction: function(item) {
				this.addressId = item.id
			},
			onChangeBox({
				value,
				name
			}) {
				var selected = this.selected;
				var orderlist = []
				selected[name.id] = {
					cloudId: name.id,
					goodsId: name.goodsId,
					quantity: value

				}
				this.selected = selected;
				console.log(this.selected)
				var total = 0;
				for (var key in selected) {
					var ii = selected[key]
					total = total + ii.quantity;
					console.log(key)
					orderlist.push(ii)
				}
				this.orderlist = orderlist;
				this.total = total
			},
			goPay: function() {
				var order = {
					details: this.orderlist,
					order: {
						quantity: this.total,
						addressId: this.addressId
					}

				}
				console.log(order)
				if (order.order.addressId>0 && order.order.quantity > 0) {
					createCloudOrder(order).then(res => {
						uni.showModal({
							title:"发货成",
							showCancel:false,
							confirmText:"✔️",
							success:function(){
										uni.navigateBack()
							}
						})
				
					})
				} else {
					uni.$u.toast('选择商品或选择地址')
				}
				//	console.log(this.total,this.selected.values(),this.addressId)

			}
		}
	}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 5px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.valuebox {
		background-color: #E6E6E6;
		border-radius: 20px;
	}
</style>
